作者：QuincySwim | 来源：互联网 | 2023-09-18 15:12
篇首语：本文由编程笔记#小编为大家整理，主要介绍了React入门以及学习资料汇总分享相关的知识，希望对你有一定的参考价值。
React
React 介绍
- React 是一个用于构建用户界面的渐进式 Javascript 库
- React主要用于构建UI&＃xff0c;很多人认为 React 是 MVC 中的 V&＃xff08;视图&＃xff09;。
- React 由 Facebook 开发
- 第一个真生意义上把组件化思想待到前端开发领域
- angular 早期没有组件化思想
- 后来也被 Vue 学习借鉴了
React 起源于 Facebook 的内部项目&＃xff0c;因为该公司对市场上所有 Javascript MVC 框架&＃xff0c;都不满意&＃xff0c;就决定自己写一套&＃xff0c;用来架设 Instagram 的网站。做出来以后&＃xff0c;发现这套东西很好用&＃xff0c;就在2013年5月开源了。
由于 React 的设计思想极其独特&＃xff0c;属于革命性创新&＃xff0c;性能出众&＃xff0c;代码逻辑却非常简单。所以&＃xff0c;越来越多的人开始关注和使用&＃xff0c;认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大&＃xff0c;从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目&＃xff0c;目标更是宏伟&＃xff0c;希望用写 Web App 的方式去写 Native App。如果能够实现&＃xff0c;整个互联网行业都会被颠覆&＃xff0c;因为同一组人只需要写一次 UI &＃xff0c;就能同时运行在服务器、浏览器和手机&＃xff08;参见《也许&＃xff0c;DOM 不是答案》&＃xff09;。
-
数据驱动视图
-
组件化
-
路由
-
React 8w
- 对技术要求比较高
- 今年春天的&＃xff0c;只要会用就行
- 编程性更好一些&＃xff0c;更底层&＃xff0c;更灵活
- 可玩儿性更高
-
Vue 7.5 w
-
angular
React 特点
- 组件化
- 高效
- 虚拟 DOM
- Vue 2 也是虚拟 DOM
- 虚拟 DOM 更高效
- 灵活
- 渐进式&＃xff0c;本身只处理 UI &＃xff0c;可以和你的其它技术栈组合到一起来使用
- 声明&＃xff08;配置&＃xff09;式设计
data 响应式数据mathods 处理函数- 这样做的好处就是按照我们约定好的方式来开发&＃xff0c;所有人写出来的代码就像一个人写的
state- 方法就是类成员
- 也有特定的组件生命钩子
- JSX
- 一种预编译 Javascript 语言&＃xff0c;允许让你的 Javascript 和 html 混搭
- 模板中就是 Javascript 逻辑
- 单向数据流
- 组件传值
- 所有数据都是单向的&＃xff0c;组件传递的数据都是单向
- Vue 也是单向数据流
- 没有双向数据绑定
React 的发展历史
- Facebook 内部用来开发 Instagram
- 2013 年开源了 React
- 随后发布了 React Native
- React 开源协议
- 知乎专栏 -React 的许可协议到底发生了什么问题&＃xff1f;
- 知乎 - 如何看待 Facebook 计划将 React 改为 MIT 许可证&＃xff1f;
- 阮一峰 - 开源许可证教程
- 阮一峰 - 如何选择开源许可证
- React 最后架不住社区的压力&＃xff0c;最后还是修改了许可协议条款。我分享&＃xff0c;我骄傲。
- React - Releases
- 2013 年 7 月 3 日
v0.3.0 - 2016 年 3 月 30 日
v0.14.8 - 2016 年 4 月 9 日
v15.0.0 - 2017 年 9 月 27 日
v16.0.0 - 截止到目前&＃xff1a;2017 年 11 月 29 日
v16.2.0
React 与 Vue 的对比
技术层面
- Vue 生产力更高&＃xff08;更少的代码实现更强劲的功能&＃xff09;
- React 更 hack 技术占比比较重
- 两个框架的效率都采用了虚拟 DOM
- 组件化
- 数据绑定
- 都支持数据驱动视图
- Vue 支持表单控件双向数据绑定
- React 不支持双向数据绑定
- 它们的核心库都很小&＃xff0c;都是渐进式 Javascript 库
- React 采用 JSX 语法来编写组件
- Vue 采用单文件组件
开发团队
- React 由 Facebook 前端维护开发
- Vue
- 早期只有尤雨溪一个人
- 由于后来使用者越来越多&＃xff0c;后来离职专职开发维护
- 目前也有一个小团队在开发维护
社区
- React 社区比 Vue 更强大
- Vue 社区也很强大
Native APP 开发
- React Native
- Weex
- 阿里巴巴内部搞出来的一个东西&＃xff0c;基于 Vue
相关资源链接
- React 官网
- 官方教程
- 官方文档
- React - GitHub
- 阮一峰 - React 技术栈系列教程
- [阮一峰 - React 入门实例教程]&＃xff08;http://www.ruanyifeng.com/blog/2015/03/react.html
- awesome react
- awesome-react-components
EcmaScript 6 补充
React 核心概念
组件化
虚拟 DOM
起步
https://reactjs.org/docs/hello-world.html
初始化及安装依赖
$ mkdir react-demos
$ cd react-demos
$ npm init --yes
$ npm install --save babel-standalone react react-dom
Hello World
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<title>demo - Hello Worldtitle>
<script src&＃61;"../node_modules/babel-standalone/babel.min.js">script>
<script src&＃61;"../node_modules/react/umd/react.development.js">script>
<script src&＃61;"../node_modules/react-dom/umd/react-dom.development.js">script>
head>
<body>
<div id&＃61;"root">div>
<script type&＃61;"text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById(&＃39;root&＃39;)
)
script>
body>
html>
京公网安备 11010802041100号